摘要: [image: https://mmbiz.qpic.cn/sz_mmbiz_gif/8m4L0A5Jh04Ivic4BVZsgh12nJpuzvMNv8rJb1ia62yTeEnQ234KJZ4QCfunkUnzza7r0NAsZC2Wu
原来做图文,也能这么简单的!
往期分享过非常多 AI 做图文的方法,什么老奶奶文案,RPA 自动制作图文,可灵 AI 文案号等等。
但是你一定没想到,原来爆款图文可以这么简单做出来。
左图是我给AI的原图,我希望仿照原图做出一张的爆款原图,除了没有小图案,
排版,构图,文案
都非常完美。
再看一个案例,左边是我给AI的治愈文案图,右边的是AI生成全新的文案图。
如果你还没意识到,这项技术代表着什么?这意味着类似这种情感图文、知识类图文,AI能一键模仿出爆款。
制作方法很简单,跟着我一步一步操作。
所用到的 AI 工具叫 Claude 3.5,如果用不上,也可以通过 AI 聚合平台 POE 上使用。
只需要准备一张参考的爆款图片和提示词,即可直接出图。
爆款图文 AI 提示词:
你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计:
1. 文字提取要求:
- 准确提取图片中所有文字内容
- 保留原有的文字层级关系
- 保持原始格式和特殊字符
- 注意保留文字的重要程度区分
2. 网页实现要求:
技术规范:
- 仅使用HTML和CSS实现(不使用JavaScript)
- 严格保持3:4的容器比例
- 实现响应式设计
- 确保跨浏览器兼容性
- 使用flex布局进行页面排版
视觉风格:
- 创建优雅、精致的版式设计
- 采用简洁现代的设计美学
- 运用柔和的渐变和纹理效果
- 适当使用装饰性边框
- 保持整体视觉平衡
CSS具体要求:
- 使用linear-gradient制作柔和背景
- 容器必须保持aspect-ratio: 3/4
- 使用flex布局实现内容居中对齐
- 设置合适的letter-spacing提高可读性
- 使用恰当的line-height优化行间距
- 添加精致的边框装饰
- 包含响应式媒体查询
字体排版规范:
- 使用优雅的衬线字体
- 建立清晰的文字层级关系
- 确保最佳阅读体验
- 实现合理的字体大小变化
- 可选添加细微的文字动效
布局结构:
- 居中构图
- 合理的留白
- 清晰的视觉层次
- 响应式内外边距
- 适度的装饰元素
输出要求:
- 提供完整的HTML文件
- 所有CSS样式写在<style>标签中
- 使用清晰的类名命名
- 包含响应式断点设置
- 关键样式部分需添加注释
请确保设计在电脑和手机上都能完美展示,文字始终保持清晰可读,同时保持优雅的美感。
操作的时候,只需要上传一张图片 + 提示词,即可。最好选择claude 3.5。
出来的效果是这样的。
如果希望换一张背景图片也非常简单,去可灵 AI 上生成一张图片,然后把图片链接复制出来。
继续下面的对话。
提示词:
请帮我为之前生成的HTML页面添加背景图片功能,图片URL:
XXX
要求:
添加半透明遮罩层保护文字可读性
可调整亮度和对比度适配文字
确保文字与背景的对比度
最后的成果可以看一下,当然也可以继续向 AI 提要求,生成出更好看的。
上面的提示词还有非常多的优化空间,学长也会持续迭代,如果希望持续获得 AI 技巧信息差,可以关注学长公众号,后台加群。
如果你问,为什么你懂这么多 AI 的信息差,我赠送您一张免费的 AI 课程,内容超值,毕竟我也是在里面学到的。
如果本文章能给你一点启发,感谢
点个赞、在看、转发三连
,如果想第一时间收到推送,请点上星标⭐
关注公众号,回复“
知识库
”,获取伟豪的精选知识库知识。
扫描下方二维码,获取 AI 提示词资料和副业资料,加群交流。
| 需求 | 输入 | 实现 | 输出 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| # | 目的 | 作用 | 实质 | 形式 | 类型 | 值 | 来源 | 外部工具 | 动作 | 指令 | 类型 | 值 | 去处 |
| s1 | 用 Claude 3.5 生成 提示词,得到 成品图 | 主体生成 | 图文 | 现代简洁 | 内容类型/素材/化学变化/参考图 | <一张参考的爆款图文图片> | Claude 3.5 | 生成/元素生成 | 你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计: 1. 文字提取要求: - 准确提取图片中所有文字内容 - 保留原有的文字层级关系 - 保持原始格式和特殊字符 - 注意保留文字的重要程度区分 2. 网页实现要求: 技术规范: - 仅使用HTML和CSS实现(不使用JavaScript) - 严格保持3:4的容器比例 - 实现响应式设计 - 确保跨浏览器兼容性 - 使用flex布局进行页面排版 视觉风格: - 创建优雅、精致的版式设计 - 采用简洁现代的设计美学 - 运用柔和的渐变和纹理效果 - 适当使用装饰性边框 - 保持整体视觉平衡 CSS具体要求: - 使用linear-gradient制作柔和背景 - 容器必须保持aspect-ratio: 3/4 - 使用flex布局实现内容居中对齐 - 设置合适的letter-spacing提高可读性 - 使用恰当的line-height优化行间距 - 添加精致的边框装饰 - 包含响应式媒体查询 字体排版规范: - 使用优雅的衬线字体 - 建立清晰的文字层级关系 - 确保最佳阅读体验 - 实现合理的字体大小变化 - 可选添加细微的文字动效 布局结构: - 居中构图 - 合理的留白 - 清晰的视觉层次 - 响应式内外边距 - 适度的装饰元素 输出要求: - 提供完整的HTML文件 - 所有CSS样式写在<style>标签中 - 使用清晰的类名命名 - 包含响应式断点设置 - 关键样式部分需添加注释 请确保设计在电脑和手机上都能完美展示 | 内容类型/成品/成品图 | s1o1 <AI 模仿生成的爆款图文> | ||
| 程序控制类型/指令/提示词 | 爆款图文 AI 提示词: 你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计: 1. 文字提取要求: - 准确提取图片中所有文字内容 - 保留原有的文字层级关系 - 保持原始格式和特殊字符 - 注意保留文字的重要程度区分 2. 网页实现要求: 技术规范: - 仅使用HTML和CSS实现(不使用JavaScript) - 严格保持3:4的容器比例 - 实现响应式设计 - 确保跨浏览器兼容性 - 使用flex布局进行页面排版 视觉风格: - 创建优雅、精致的版式设计 - 采用简洁现代的设计美学 - 运用柔和的渐变和纹理效果 - 适当使用装饰性边框 - 保持整体视觉平衡 CSS具体要求: - 使用linear-gradient制作柔和背景 - 容器必须保持aspect-ratio: 3/4 - 使用flex布局实现内容居中对齐 - 设置合适的letter-spacing提高可读性 - 使用恰当的line-height优化行间距 - 添加精致的边框装饰 - 包含响应式媒体查询 字体排版规范: - 使用优雅的衬线字体 - 建立清晰的文字层级关系 - 确保最佳阅读体验 - 实现合理的字体大小变化 - 可选添加细微的文字动效 布局结构: - 居中构图 - 合理的留白 - 清晰的视觉层次 - 响应式内外边距 - 适度的装饰元素 输出要求: - 提供完整的HTML文件 - 所有CSS样式写在<style>标签中 - 使用清晰的类名命名 - 包含响应式断点设置 - 关键样式部分需添加注释 请确保设计在电脑和手机上都能完美展示,文字始终保持清晰可读,同时保持优雅的美感。 操作的时候 | ||||||||||||
| 需求 | 输入 | 实现 | 输出 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| # | 目的 | 作用 | 实质 | 形式 | 类型 | 值 | 来源 | 外部工具 | 动作 | 指令 | 类型 | 值 | 去处 |
| s1 | 用 Claude 3.5 调整 提示词,得到 成品图 | 后期 | 图文 | 现代简洁 | 内容类型/素材/化学变化/参考图 | <一张背景图片> | Claude 3.5 | 修改/变/调整 | 添加半透明遮罩层保护文字可读性 可调整亮度和对比度适配文字 确保文字与背景的对比度 | 内容类型/成品/成品图 | s2o1 <AI 替换背景后的图文> | ||
| 程序控制类型/指令/提示词 | 提示词: 你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计: 1. 文字提取要求: - 准确提取图片中所有文字内容 - 保留原有的文字层级关系 - 保持原始格式和特殊字符 - 注意保留文字的重要程度区分 2. 网页实现要求: 技术规范: - 仅使用HTML和CSS实现(不使用JavaScript) - 严格保持3:4的容器比例 - 实现响应式设计 - 确保跨浏览器兼容性 - 使用flex布局进行页面排版 视觉风格: - 创建优雅、精致的版式设计 - 采用简洁现代的设计美学 - 运用柔和的渐变和纹理效果 - 适当使用装饰性边框 - 保持整体视觉平衡 CSS具体要求: - 使用linear-gradient制作柔和背景 - 容器必须保持aspect-ratio: 3/4 - 使用flex布局实现内容居中对齐 - 设置合适的letter-spacing提高可读性 - 使用恰当的line-height优化行间距 - 添加精致的边框装饰 - 包含响应式媒体查询 字体排版规范: - 使用优雅的衬线字体 - 建立清晰的文字层级关系 - 确保最佳阅读体验 - 实现合理的字体大小变化 - 可选添加细微的文字动效 布局结构: - 居中构图 - 合理的留白 - 清晰的视觉层次 - 响应式内外边距 - 适度的装饰元素 输出要求: - 提供完整的HTML文件 - 所有CSS样式写在<style>标签中 - 使用清晰的类名命名 - 包含响应式断点设置 - 关键样式部分需添加注释 请确保设计在电脑和手机上都能完美展示,文字始终保持清晰可读,同时保持优雅的美感。 操作的时候,只需要上传一张图片 + 提示词,即可。最好选择claude 3.5。 [image: https://mmbiz.qpic.cn/sz_mmbiz_png/8m4L0A5Jh04ZdwIUKGZHCFcNfKaPib7yr9F7hUxr8X7uMgIQEIrylSFWia5LBNcnK11ep18tiaSCuibZCKocx8S4zQ/640?wx_fmt=png&from=appmsg] 出来的效果是这样的。 [image: https://mmbiz.qpic.cn/sz_mmbiz_png/8m4L0A5Jh04ZdwIUKGZHCFcNfKaPib7yrS5jgxuMlvOBZQcoAL8EjL69yjpOPTqdeMtSqqCbZs5ahjI8lG5DvlA/640?wx_fmt=png&from=appmsg] 如果希望换一张背景图片也非常简单,去可灵 AI 上生成一张图片,然后把图片链接复制出来。 [image: https://mmbiz.qpic.cn/sz_mmbiz_png/8m4L0A5Jh04ZdwIUKGZHCFcNfKaPib7yrgGiaEE39WRfbMK87EalUZkI5Mtfs4yhXCkuRXLNicTY5drnBqr4P8giaQ/640?wx_fmt=png&from=appmsg] 继续下面的对话。 提示词: 请帮我为之前生成的HTML页面添加背景图片功能,图片URL: XXX 要求: 添加半透明遮罩层 | ||||||||||||